<template>
  <el-dialog v-model="visible" width="600px" title="开票信息" :append-to-body="true" @close="close">
    <el-form :model="form" :rules="rules" ref="formRef" size="small" label-width="100px">
      <el-form-item label="发票抬头" prop="purchaser">
        <el-input v-model="form.purchaser" placeholder="请输入抬头"/>
      </el-form-item>
      <el-form-item label="识别号" prop="taxpayerIdNo">
        <el-input v-model="form.taxpayerIdNo" placeholder="请输入识别号"/>
      </el-form-item>
      <el-form-item label="开户行" prop="openingBank">
        <el-input v-model="form.openingBank" placeholder="请输入开户行"/>
      </el-form-item>
      <el-form-item label="银行账号" prop="bankAccount">
        <el-input v-model="form.bankAccount" placeholder="请输入银行账号"/>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入地址"/>
      </el-form-item>
      <el-form-item label="手机号" prop="telephone">
        <el-input v-model="form.telephone" placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="visible = false">取消</el-button>
        <el-button type="primary" :loading="submitLoading" size="small" @click="submit(formRef)">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {computed, reactive, toRefs, ref} from 'vue'
import invoiceApi from '/@/api/ums/customer/invoice'
import {ElMessage} from 'element-plus'


export default {
  name: 'InvoiceSetting',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    invoiceData: {
      type: Object,
      default: {
        id: null,
        customerId: null,
        purchaser: null,
        taxpayerIdNo: null,
        address: null,
        telephone: null,
        openingBank: null,
        bankAccount: null
      }
    }
  },
  emits: ['callback', 'update:dialogVisible'],
  setup(props, context) {
    const formRef = ref()
    const {dialogVisible, invoiceData} = toRefs(props)
    const visible = computed({
      get: () => {
        if (dialogVisible.value) {
          state.form = invoiceData.value
        }
        return dialogVisible.value
      },
      set: val => context.emit('update:dialogVisible', val)
    })
    const state = reactive({
      form: {
        id: null,
        customerId: null,
        purchaser: null,
        taxpayerIdNo: null,
        address: null,
        telephone: null,
        openingBank: null,
        bankAccount: null
      },
      rules: {
        purchaser: [{required: true, message: '请输入发票抬头', trigger: 'blur'}],
        taxpayerIdNo: [{required: true, message: '请输入识别号', trigger: 'blur'}],
        // address: [{required: true, message: '请输入地址', trigger: 'blur'}],
        // telephone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        openingBank: [{required: true, message: '请输入开户行', trigger: 'blur'}],
        bankAccount: [{required: true, message: '请输入银行账号', trigger: 'blur'}]
      },
      submitLoading: false    // 提交按钮的加载动画控制

    })

    const close = () => context.emit('callback')
    const submit = (formEl) => {
       formEl.validate(async (valid) => {
        if (!valid) return
        state.submitLoading = true
        try {
          let res
          if (state.form.id) {
            res = await invoiceApi.edit(state.form)
          } else {
            res = await invoiceApi.create(state.form)
          }
          if (res.data) {
            ElMessage.success('保存成功！')
            context.emit('callback')
            context.emit('update:dialogVisible', false)
          }
        } catch (e) {
          console.log('发票信息异常捕获\n', e)
        }
        state.submitLoading = false
      })
    }
    return {
      visible,
      close,
      formRef,
      submit,
      ...toRefs(state)
    }
  }
}
</script>

<style>

</style>
